<template>
  <view
    @touchmove.prevent
    v-if="maskSwitch"
    :class="maskSwitch == true ? 'show-dialog mask' : 'hide-dialog mask'"
    @click="closeModel"
  >
    <slot>
      <view class="list">
        <view
          v-for="(item, index) in newlist"
          :key="index"
          @click="handle(item, index)"
        >
          {{ item }}
        </view>
      </view>
    </slot>
  </view>
</template>

<script>
export default {
  props: {
    maskSwitch: {
      type: Boolean,
      default: false,
    },
    clickSelf: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    newlist() {
      return ["回复", "删除", "取消"];
    },
  },
  methods: {
    handle(item, index) {
      this.$emit("handle", { name: item, index: index });
    },
    closeModel() {
      this.$parent.switchList = false;
    },
  },
};
</script>

<style scoped lang="scss">
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99999999;
  .list {
    position: absolute;
    background-color: #fff;
    width: 100%;
    bottom: 0;
    left: 0;

    > view {
      transition: all 1s;
      height: 100rpx;
      text-align: center;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(36, 36, 36, 1);
      line-height: 100rpx;
      border-bottom: 2rpx solid rgba(245, 245, 245, 1);
    }
  }
}
.show-dialog {
  animation: 200ms showDialog linear forwards;
}
.hide-dialog {
  animation: 200ms hideDialog linear forwards;
}
@keyframes hideDialog {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes showDialog {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
